<template>
    <view class="page">
		<view class="popup-cont">
			<view class="g-order-deital">
				<view class="d-title">订单明细:</view>
				<view class="item" v-for="(item,index) in data " :key="index">
					<view class="order-title">订单号：{{item.order_no}}</view>
					<view class="order-deital">
						<view class="fex"><text class="name">购买金额：</text><text class="text price">¥{{item.frozen_money}}</text></view>
						<view class="fex"><text class="name">购买时间：</text><text class="text">{{item.end_time}}</text></view>
						<view class="fex"><text class="name">支付方式：</text><text class="text">{{item.account_type}}</text></view>
						<view class="fex"><text class="name">备注：</text><text class="text">{{item.remark}}</text></view>
					</view>
				</view>
			</view>
		</view>
		<view class="m-loading" v-if="showloading">
			<image src="../../static/images/loading.gif" mode="widthFix"></image>
			<text>加载中</text>
		</view>
    </view>
</template>
<script>
    import henglang from '@/common/common.js';
    export default {
        data() {
            return {
			    data:[],
				showloading: false
            };  
        },
        methods: {
           
        },
        onLoad({
			end_time
		}) {
			let that = this
			that.showLoading = true
			henglang.get('member/getFutureOrderDetail',{end_time:end_time},true,function(res){
				that.showLoading = false
				if(res.data.code == 0){
					that.data = res.data.data
				}
			})
        }
    }
</script>

<style>
	.page{
		background: #ffffff;
	}
	.popup-cont{
		font-size: 30upx;
		width: 656upx;
		margin: 0 auto;
	}
	.popup-cont .d-title{
		width: 100%;
		color: #d71511;
		font-weight: bold;
		position: relative;
		padding: 10upx 0;
		padding-left: 30upx;
	}
	.popup-cont .d-title:after{
		content: '';
		position: absolute;
		left: 0upx;
		top: 50%;
		margin-top: -15upx;
		width: 6upx;
		height: 30upx;
		background: #d71511;
	}
	.g-nav-title{
		line-height: 50upx;
		width: 100%;
	}
	.g-container {
	    display: flex;
		text-align: center;
		align-items: center;
	}
	.g-container > view {
		width: 23%;
	}
	.g-container .handle{
		width: 31%;
		color: #707070;
	}
	.popup-cont .u-arrow {
	    display: inline-block;
	    border: 10upx solid;
	    border-color: #707070 transparent transparent transparent;
	    transform: translate(54%,26%);
	}
	.popup-cont .g-line {
		border-bottom: 1px solid #f5f5f5;
	}
	.popup-cont .g-popup-content {
		width: 100%;
		margin-bottom: 20upx;
	}
	.popup-cont .g-popup-content .g-container{
		height: 100upx;
	}
	.popup-cont .g-buy-detail {
		margin-bottom: 20upx;
	}
	.popup-cont .g-detail-left {
		display: inline-block;
		font-size: 28upx;
		width: 230upx;
		position: relative;
	}
	.popup-cont .g-detail-left.b-right{
		padding-right: 40upx;
		padding-left: 20upx;
		margin: 0 40upx;
	}
	.popup-cont .g-detail-left.b-right:after{
		content: '';
		position: absolute;
		top: 50%;
		right: 0;
		background: #DCDCDC;
		width: 1px;
		height: 84upx;
		margin-top: -42upx;
	}
	.popup-cont .g-detail-left view{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 10upx 0;
	}
	.g-order-deital{
		background: #ffffff;
		width: 100%;
		padding: 20upx 0;
	}
	.g-order-deital .item{
		background: #ffffff;
		border-radius: 3px;
		box-shadow: 0 0 5px rgba(0, 0, 0, .2);
		padding: 20upx;
		margin-top: 20upx;
	}
	.g-order-deital .order-title{
		color: #333333;
		padding: 10upx 0;
		padding-left: 30upx;
	}
	.g-order-deital .price{
		color: #D71511;
		font-size: 36upx;
		font-weight: bold;
	}
	.g-order-deital .fex{
		padding: 5upx 0;
	}
	.g-order-deital .order-deital{
		padding-left: 30upx;
	}
</style>
